<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/login.css">
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    	<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    		
    	<script src="js/jquery-3.1.0.min.js"></script>
		<title>mtpos login Page</title>
	</head>
	<body>
		<div class="left">
			<div class="polaroid rotate_left">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_left">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_left">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_left">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_left">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
		</div>
		<div class="wrap">
			<div class="top">
				<div class="polaroid rotate_top">
					<div class="img">
						<img src="img/2.jpg" alt="奶茶"/>
					</div>
					<p class="caption">港式奶茶，丝滑香醇</p>
				</div>
				<div class="polaroid rotate_top">
					<div class="img">
						<img src="img/2.jpg" alt="奶茶"/>
					</div>
					<p class="caption">港式奶茶，丝滑香醇</p>
				</div>
				<div class="polaroid rotate_top">
					<div class="img">
						<img src="img/2.jpg" alt="奶茶"/>
					</div>
					<p class="caption">港式奶茶，丝滑香醇</p>
				</div>
			</div>
			<div class="middle">
				<div class="login-wrap">
					<div class="logo">
						<p>MTP Login Form</p>
					</div>
					<div class="login">
						<form>
							<div class="form-group">登录名：<label><input id="staffNo" class="form-control" type="text" placeholder="输入你的用户名" /></label></div>
							<div class="form-group">密&nbsp&nbsp&nbsp码：<label><input id="pwd" class="form-control" type="password" placeholder="输入你的密码" /></label></div>
							<button class="btn btn-success" type="button" onclick="login()">登录</button>
							<!-- <button class="btn btn-info" type="reset">重置</button> -->
							<!-- <button class="btn btn-default" type="button">注册</button> -->
						</form>
					</div>
				</div>
			</div>
			<div class="bottom">
				<div class="polaroid rotate_bottom">
					<div class="img">
						<img src="img/2.jpg" alt="奶茶"/>
					</div>
					<p class="caption">港式奶茶，丝滑香醇</p>
				</div>
				<div class="polaroid rotate_bottom">
					<div class="img">
						<img src="img/2.jpg" alt="奶茶"/>
					</div>
					<p class="caption">港式奶茶，丝滑香醇</p>
				</div>
				<div class="polaroid rotate_bottom">
					<div class="img">
						<img src="img/2.jpg" alt="奶茶"/>
					</div>
					<p class="caption">港式奶茶，丝滑香醇</p>
				</div>
			</div>
		</div>
		
		<div class="right">
			<div class="polaroid rotate_right">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_right">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_right">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_right">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
			<div class="polaroid rotate_right">
				<div class="img">
					<img src="img/2.jpg" alt="奶茶"/>
				</div>
				<p class="caption">港式奶茶，丝滑香醇</p>
			</div>
		</div>
	</body>
</html>
<script language="JavaScript">
	$(function(){
		rotateImg()
		$('img').attr('draggable',"false")
		$('.login-wrap').find('input').focus(function(){
			$(this).parents(".login-wrap").css("box-shadow"," 0px 15px 15px #888888")
		}).blur(function(){
			$(this).parents(".login-wrap").css("box-shadow","")
		})

	})
	function login(){
		$.ajax({
			url: "login.action",
			type:"post",
			dataType:"json",
			data:{
				"staff.staffNo":$('#staffNo').val(),
				"staff.password":$('#pwd').val()
			},
			success:function(result){
				if(result=="success"){
					window.location.href='index.jsp';
				}
				else{
					alert(result)
				}
			},
			error:function(){
				
			}
		})
	}
	function rotateImg(){
		var l
		var angle
		var ypos
		var xpos
		var t
		var r
		var a
		var zIndex=2
		$('.polaroid').find('img').each(function(){
			var atr = Math.floor((Math.random()*5)+1)
			$(this).attr("src","img/"+atr+".jpg")
		})
		$('.rotate_left').map(function(){
			angle = Math.floor((Math.random()*360)+1);
			ypos = Math.floor((Math.random()*100)-29);
			xpos = Math.floor((Math.random()*50)+1);
			t = ypos+"%"
			r = xpos+"%"
			a = angle+"deg"
			$(this).css({
				"top":t,
				"right":r,
		    	"-ms-transform":"rotate("+a+")",
				"-moz-transform":"rotate("+a+")",
				"-webkit-transform":"rotate("+a+")",
				"-o-transform":"rotate("+a+")",
				"transform":"rotate("+a+")"
			})
		})
		$('.rotate_right').map(function(){
			angle = Math.floor((Math.random()*360)+1);
			ypos = Math.floor((Math.random()*100)-29);
			xpos = Math.floor((Math.random()*50)+1);
			t = ypos+"%"
			r = xpos+"%"
			a = angle+"deg"
			$(this).css({
				"top":t,
				"left":r,
		    	"-ms-transform":"rotate("+a+")",
				"-moz-transform":"rotate("+a+")",
				"-webkit-transform":"rotate("+a+")",
				"-o-transform":"rotate("+a+")",
				"transform":"rotate("+a+")"
			})
		})
		$('.rotate_top').map(function(){
			angle = Math.floor((Math.random()*360)+1);
			ypos = Math.floor((Math.random()*20)-59);
			xpos = Math.floor((Math.random()*90)-19);
			t = ypos+"%"
			r = xpos+"%"
			a = angle+"deg"
			$(this).css({
				"top":t,
				"right":r,
		    	"-ms-transform":"rotate("+a+")",
				"-moz-transform":"rotate("+a+")",
				"-webkit-transform":"rotate("+a+")",
				"-o-transform":"rotate("+a+")",
				"transform":"rotate("+a+")"
			})
		})
		$('.rotate_bottom').map(function(){
			angle = Math.floor((Math.random()*360)+1);
			ypos = Math.floor((Math.random()*20)-49);
			xpos = Math.floor((Math.random()*90)-19);
			t = ypos+"%"
			r = xpos+"%"
			a = angle+"deg"
			$(this).css({
				"bottom":t,
				"right":r,
		    	"-ms-transform":"rotate("+a+")",
				"-moz-transform":"rotate("+a+")",
				"-webkit-transform":"rotate("+a+")",
				"-o-transform":"rotate("+a+")",
				"transform":"rotate("+a+")"
			})
		})
		var array;
		array = $('.polaroid').map(function(){
			return $(this).attr('style')
		}).get()
		var left = array.slice(0,5)
		var top = array.slice(5,8)
		var bottom = array.slice(8,11)
		var right = array.slice(11,16)
//		console.log(right)
//		控制图片移动
		$('.polaroid').click(function(){
			var location = $(this).attr("class")
			var origin
			if(location.indexOf("rotate_left")!=-1){
				origin = ($(this).attr("style"))
				$(this).css({
					"transform":"matrix(1, 0, 0, 1, 0, 0)",
					'right':'-130%',
					'top':'28%',
					'z-index':zIndex
				})
				$(this).siblings().each(function(index){
					$(this).attr("style",array[index])
				})
				for(var i=0;i<top.length;i++){
					$(this).parent().siblings().eq(0).children().eq(0).find('.polaroid').eq(i).attr("style",top[i])
					$(this).parent().siblings().eq(0).children().eq(2).find('.polaroid').eq(i).attr("style",bottom[i])
				}
				for(var i=0;i<right.length;i++){
					$(this).parent().siblings().eq(1).find('.polaroid').eq(i).attr("style",right[i])
				}
				zIndex++;
			}
			else if(location.indexOf("rotate_top")!=-1){
				origin = ($(this).attr("style"))
				$(this).css({
					"transform":"matrix(1, 0, 0, 1, 0, 0)",
					'right':'25%',
				    'top':'80%',
				    'z-index':zIndex
				})
				zIndex++;
				$(this).siblings().each(function(index){
					$(this).attr("style",array[index+5])
				})
				for(var i=0;i<bottom.length;i++){
					console.log($(this).parent().siblings().eq(1).children())
					$(this).parent().siblings().eq(1).children().eq(i).attr("style",bottom[i])
				}
				for(var i=0;i<right.length;i++){
//					console.log($(this).parents(".wrap").siblings())
					$(this).parents(".wrap").siblings().eq(0).find('.polaroid').eq(i).attr("style",left[i])
					$(this).parents(".wrap").siblings().eq(1).find('.polaroid').eq(i).attr("style",right[i])
				}
			}
			else if(location.indexOf("rotate_bottom")!=-1){
				origin = ($(this).attr("style"))
				$(this).css({
					"transform":"matrix(1, 0, 0, 1, 0, 0)",
					'right':'25%',
				    'bottom':'90%',
				    'z-index':zIndex
				})
				zIndex++;
				$(this).siblings().each(function(index){
					$(this).attr("style",array[index+8])
				})
				for(var i=0;i<bottom.length;i++){
					console.log($(this).parent().siblings().eq(0).children())
					$(this).parent().siblings().eq(0).children().eq(i).attr("style",top[i])
				}
				for(var i=0;i<right.length;i++){
//					console.log($(this).parents(".wrap").siblings())
					$(this).parents(".wrap").siblings().eq(0).find('.polaroid').eq(i).attr("style",left[i])
					$(this).parents(".wrap").siblings().eq(1).find('.polaroid').eq(i).attr("style",right[i])
				}
			}
			else if(location.indexOf("rotate_right")!=-1){
				origin = ($(this).attr("style"))
				$(this).css({
					"transform":"matrix(1, 0, 0, 1, 0, 0)",
					'left':'-120%',
				    'top':'28%',
				    'z-index':zIndex
				})
				zIndex++;
				$(this).siblings().each(function(index){
					$(this).attr("style",array[index+11])
				})
				for(var i=0;i<top.length;i++){
//					console.log($(this).parent().siblings().eq(0))
					$(this).parent().siblings().eq(1).children().eq(0).find('.polaroid').eq(i).attr("style",top[i])
					$(this).parent().siblings().eq(1).children().eq(2).find('.polaroid').eq(i).attr("style",bottom[i])
				}
				for(var i=0;i<right.length;i++){
					$(this).parent().siblings().eq(0).find('.polaroid').eq(i).attr("style",left[i])
				}
			}
		})
//		登陆框最上面
		$("body").click(function(event){
			var target = $(event.target)
			if(!(target.parents(".polaroid")).is(".polaroid")&&!target.is(".polaroid")){
				$('.polaroid').each(function(index){
					$(this).attr("style",array[index])
				})
			}
		})
	}
</script>
